export component TipMsg {
    // 轻提示
    in-out property <bool> opacity_flag: false;
    in-out property <duration> msg_dutime:2000ms;
    in-out property <duration> an_dutime: 200ms;
    // in-out property <brush> background;
    in-out property background <=> msg_wrap.background;
    in-out property <bool> visibleval <=> msg_wrap.visible;
    in-out property <string> textval;
    in-out property <brush> color:#fff;
    callback show();
    show() => {
        msg_wrap.visible = true;
        root.opacity_flag = true;
        hide_timer.running = true;
    }
    hide_timer := Timer {
        interval: msg_dutime;
        running: false;
        triggered() => {
            self.running = false;
            opacity_flag = false;
            hidevi_timer.running = true;
        }
    }

    hidevi_timer := Timer {
        interval: an_dutime;
        running: false;
        triggered() => {
            self.running = false;
            msg_wrap.visible = false;
        }
    }

    msg_wrap := Rectangle {
        visible: false;
        height: 35px;
        z: 3;
        // background: @linear-gradient(90deg, #87eca6 0%, #31d882 50%, #16cf70 100%);
        opacity: opacity_flag ? 1 : 0;
        animate opacity { duration: an_dutime; }
        border-radius: 6px;
        Text {
            text: textval;
            font-size: 16px;
            color: color;
        }
    }
}
